<template>
	<div class="wrapper">
		<div class="thumb">
			<view class="index-banner" v-if="goodsInfo.goods_banner.length!=0">
			    <swiper class="banner-swiper" autoplay="true" interval="2000" duration="1500"	circular>
			        <swiper-item v-for="item in goodsInfo.goods_banner" :key="item.id" @click="prevImg(item)">
			            <image :src="item"  mode="aspectFill"/>
			        </swiper-item>
			    </swiper>
			</view>
			<image :src="goodsInfo.thumb_url" mode="aspectFill" v-else></image>
		</div>
		<div class="msg">
			<div class="name">{{goodsInfo.name}}</div>
			<div class="desc">
				<div class="intergal">{{goodsInfo.exchange_integral}} <span>积分</span></div>
				<div class="num" v-if="goodsInfo.stock>0">
					<span>已兑{{goodsInfo.sale_count}}</span>
					<span>库存{{goodsInfo.stock}}</span>
				</div>
				<div v-else style="rgba(253,95,42,1)">已兑光</div>
			</div>
		</div>
		
		<!-- 详情 -->
		<div class="detail" v-if="goodsInfo.detail">
			<u-parse :content="goodsInfo.detail" @preview="preview" @navigate="navigate"  class="rich-text"/>
		</div>
		<!-- 详情end -->
		
		<div class="btn-wrapper">
			<button open-type="contact">
				<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/customer.png" mode="widthFix"></image>
			</button>
			<div class="btn" @click="toSelectAddress" v-if="goodsInfo.stock>0&&goodsInfo.is_exchange==1">
				立即抢兑
			</div>
			<div class="btn btn-un"   v-else-if="goodsInfo.stock==0 && goodsInfo.is_exchange==1">
				已兑光
			</div>
			<div class="btn btn-un"   v-else-if="goodsInfo.stock>0 && goodsInfo.is_exchange==0">
				积分不足
			</div>
		</div>
	</div>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		data() {
			return {
				goodsInfo:{},
				goodsId:'',
				userInfo:{}
			};
		},
		components: {
		    uParse
		  },
		methods:{
			prevImg(url){
				//预览图
				uni.previewImage({
					urls:this.goodsInfo.goods_banner,
					item:url
				})
			},
			preview(src, e) {
			      // do something
			    },
			navigate(href, e) {
			  // do something
			},
			toSelectAddress(){
				uni.navigateTo({
					url:`/pages/shop/selectAddress/selectAddress?goodsId=${this.goodsInfo.id}`
				})
			},
			async getGoodsDetails(){
				//获取商品详情
				let params={
					goods_id:this.goodsId,
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.getGoodsDetails(params);
				if(res.data.level=='success'){
					this.goodsInfo=res.data.data
				}
			},
		},
		onLoad(options) {
			this.goodsId=options.goodsId
			this.getGoodsDetails();
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.wrapper{
		background:rgba(241,244,247,1);
		min-height: 100vh;
		.thumb{
			width: 100%;
			image{
				width: 100%;
				height: 380rpx;
			}
		}
		swiper{height: 380rpx;}
		//商品信息
		.msg{
			
			width: 100%;
			background: #fff;
			&>div{
				padding:20rpx;
			}
			.desc{
				@include flex(space-between);
				width:100%;
				padding:5rpx 20rpx 30rpx 20rpx !important;
			}
			.name{
				font-size: 40rpx;
				font-weight: 600;
				padding:28rpx 20rpx 10rpx 20rpx !important;
			}
			.intergal{
				color:rgba(253,95,42,1);
				font-weight: 600;
				span{
					font-size: 24rpx;
					font-weight: 400;
					color:rgba(139,141,147,1);
				}
			}
			.num{
				font-weight: 400;
				font-size: 24rpx;
				color:rgba(139,141,147,1);
				span{
					display: inline-block;
					margin:0 20rpx;
				}
				
			}
		}
		//详情图片
		.detail{
			margin-top:20rpx ;
			background: #fff;
			padding:20rpx 30rpx 20rpx 30rpx;
			image{
				max-width:100% !important;
			}
			margin-bottom: 150rpx;
		}
		
		.btn-wrapper{
			width: 100%;
			position: fixed;
			bottom: 0rpx;
			padding: 20rpx 30rpx;
			background: #fff;
			@include flex(space-between);
			button{
				@include flex(flex-start);
				background: #fff;
				border:none;
				width: 150rpx;
				height: 80rpx;
				margin-left:-20rpx;
				image{
					width: 150rpx;
					height: 40rpx;
				}
				&:after{
					border: none;
				}
			}
			.btn{
				background: #FFE226;
				font-size:32rpx;
				text-align: center;
				font-weight: 600;
				
				width:calc(100vw - 150rpx);
				border-radius: 16rpx;
				height: 80rpx;
				line-height: 80rpx;
			}
			.btn-un{
				background: gray;
				color:#fff;
			}
		}
	}
</style>
<style>
	.rich-text{
		padding:20rpx;
	}
	
	.rich-text img{
		max-width:100% !important;
	}
</style>
